.qa_screen {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f8f8f8;
  .qa_left {
    width: 370px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../images/qa_left.png');
  }
  .qa_right {
    position: absolute;
    top: 0;
    left: 370px;
    right: 0;
    bottom: 0;
    .qa_title {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      line-height: 50px;
      height: 50px;
      background-color: #efefef;
      padding: 0 40px;
      color: @baseGreen;
      font-size: 20px;
      &.red {
        color: @baseRed;
      }
    }
    .qa_content {
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      bottom: 162px;
      background-color: #fff;
      overflow: hidden;
      .qa_list {
        overflow-x: hidden;
        overflow-y: auto;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        bottom: 0;
        .qa_item {
          padding: 10px 40px;
          .clearfix();
          .qa_answer_tip {
            text-align: center;
            margin-bottom: 10px;
            color: #333;
            font-size: 13px;
          }
          .link_tip {
            text-align: center;
            margin-bottom: 10px;
            .link_tip_inner {
              display: inline-block;
              background-color: #ccc;
              color: #fff;
              font-size: 14px;
              border-radius: 3px;
              padding: 5px 10px;
            }
          }
          .gift_tip {
            display: inline-block;
            color: #fff;
            padding: 5px 10px;
            background-color: #999;
            border-radius: 3px;
            font-size: 13px;
          }
          .qa_head {
            width: 45px;
            height: 45px;
            float: left;
            .qa_head_img{
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .qa_detail {
            float: left;
            margin-left: 10px;
            .qa_name {
              font-size:14px;
              margin-bottom: 5px;
              color:#737373;
            }
            .qa_text {
              word-break: break-all;
              text-align: left;
              border-radius: 10px;
              padding: 10px 15px;
              background-color: #F0F0F0;
              font-size: 16px;
              color: #333;
              display: inline-block;
              max-width: 600px;
              line-height: 1.5;
              position: relative;
              .triangle {
                display: none;
                position: absolute;
                left: -8px;
                top: 12px;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 6px solid #fff;
                transform:rotate(-90deg);
              }
            }
            .qa_question {
              text-align: left;
              border-radius: 10px;
              padding: 10px 15px;
              background-color: #F0F0F0;
              font-size: 16px;
              color: @baseGreen;
              display: inline-block;
              max-width: 300px;
              line-height: 1.5;
              position: relative;
              min-width: 80px;
              .triangle {
                display: none;
                position: absolute;
                left: -8px;
                top: 12px;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 6px solid #fff;
                transform:rotate(-90deg);
              }
              .question_flag {
                position: absolute;
                bottom: -10px;
                right: 15px;
                width: auto;
                height: 20px;
              }
              .question_zan_con {
                position: absolute;
                right: -10px;
                top: 0;
                height: 100%;
                .question_zan {
                  position: absolute;
                  top: 50%;
                  left: 0;
                  transform: translateY(-50%);
                  height: 30px;
                  line-height: 30px;
                  .zan_icon_out {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: #f1f1f1;
                    position: absolute;
                    cursor: pointer;
                    .zan_icon {
                      width: 20px;
                      height: 20px;
                      position: absolute;
                      top: 5px;
                      left: 5px;
                    }
                    &.active {
                      background-color: @baseGreen;
                    }
                  }
                  .zan_text {
                    color: #000;
                    font-weight: 500;
                    height: 30px;
                    position: absolute;
                    left: 40px;
                    min-width: 100px;
                    font-size: 12px;
                  }
                }
              }
              .users_con {
                position: absolute;
                height: 20px;
                bottom: -25px;
                left: -5px;
                .s_user {
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  border-radius: 50%;
                }
              }
              &.has_users {
                margin-bottom: 20px;
              }
              &._red {
                color: @baseRed;
              }
            }
            .qa_answer {
              width: 300px;
              position: relative;
              .triangle {
                display: none;
                left: auto;
                right: -8px;
                transform: rotate(90deg);
                border-bottom: 6px solid @baseGreen;
              }
              .answer_top_text {
                text-align: left;
                background-color: @baseGreen;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                padding: 10px 15px;
                font-size: 16px;
                line-height: 1.5;
                color: #fff;
                position: relative;
              }
              .answer_top_voice {
                height: 35px;
                background-color: @baseGreen;
                text-align: right;
                line-height: 35px;
                position: relative;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                cursor: pointer;
                .voice_icon {
                  width: 25px;
                  height: 25px;
                  position: absolute;
                  top: 5px;
                  left: 10px;
                }
                .time {
                  height: 35px;
                  position: absolute;
                  color: #fff;
                  font-size: 14px;
                  right: 10px;
                  text-align: center;
                  line-height: 35px;
                }
                .red_point {
                  position: absolute;
                  background-color: @baseRed;
                  width: 9px;
                  height: 9px;
                  border-radius: 50%;
                  top: 13px;
                  left: -20px;
                }
                .voice_loading {
                  position: absolute;
                  width: 9px;
                  height: 9px;
                  border-radius: 50%;
                  top: 13px;
                  left: -20px;
                  .voice_loading_icon {
                    width: 100%;
                    height: 100%;
                    display: block;
                  }
                }
              }
              .answer_top_image {
                height: 200px;
                background-color: rgba(0,0,0,.2);
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                cursor: pointer;
              }
              .answer_bottom {
                padding: 15px;
                background-color: #f7f7f7;
                text-align: left;
                font-size: 15px;
                line-height: 1.5;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                color: #aaa;
                position: relative;
                z-index: 1;
                .answer_bottom_name {
                  .small_name {
                    font-size: 16px;
                    color: #666;
                  }
                }
                .answer_bottom_content {
                  margin-top: 5px;
                  color: #666;
                }
                .answer_delta {
                  width: 33*.4px;
                  height: 19*.4px;
                  position: absolute;
                  bottom: 0;
                  left: 20px;
                  z-index: -1;
                }
                .answer_top_flag {
                  width: 89*.4px;
                  height: 52*.4px;
                  position: absolute;
                  top: 0;
                  right: 20px;
                  z-index: -1;
                }
              }
              .answer_zan_con {
                position: absolute;
                left: -10px;
                top: 0;
                height: 100%;
                .answer_zan {
                  position: absolute;
                  top: 50%;
                  left: 0;
                  transform: translateY(-50%);
                  height: 30px;
                  line-height: 30px;
                  .zan_icon_out {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: #f1f1f1;
                    position: absolute;
                    cursor: pointer;
                    right: 0;
                    .zan_icon {
                      width: 20px;
                      height: 20px;
                      position: absolute;
                      top: 5px;
                      left: 5px;
                    }
                    &.active {
                      background-color: @baseGreen;
                    }
                  }
                  .zan_text {
                    color: #000;
                    font-weight: 500;
                    height: 30px;
                    position: absolute;
                    right: 40px;
                    min-width: 100px;
                    font-size: 12px;
                  }
                }
              }
              .users_con {
                position: absolute;
                height: 20px;
                bottom: -25px;
                left: -5px;
                .s_user {
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  border-radius: 50%;
                }
              }
              &.has_users {
                margin-bottom: 20px;
              }
            }
            .qa_image {
              width: 220px;
              height: 220px;
              //border: 2px solid @baseGreen;
              position: relative;
              display: inline-block;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              border-radius: 10px;
              background-color: rgba(0,0,0, .2);
              cursor: pointer;
              .triangle {
                display: none;
                position: absolute;
                left: -8px;
                top: 12px;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 6px solid #fff;
                transform:rotate(-90deg);
              }
            }
            .qa_voice {
              width: 100px;
              height: 35px;
              display: inline-block;
              background-color: @baseGreen;
              text-align: right;
              line-height: 35px;
              position: relative;
              border-radius: 10px;
              cursor: pointer;
              .voice_icon {
                width: 25px;
                height: 25px;
                position: absolute;
                top: 5px;
                left: 10px;
              }
              .triangle {
                display: none;
                position: absolute;
                left: -8px;
                top: 12px;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 6px solid #fff;
                transform:rotate(-90deg);
              }
              .time {
                height: 35px;
                position: absolute;
                color: #fff;
                font-size: 14px;
                right: 10px;
                text-align: center;
                line-height: 35px;
              }
              .red_point {
                position: absolute;
                background-color: @baseRed;
                width: 9px;
                height: 9px;
                border-radius: 50%;
                top: 13px;
                left: -20px;
              }
              .voice_loading {
                position: absolute;
                width: 9px;
                height: 9px;
                border-radius: 50%;
                top: 13px;
                left: -20px;
                .voice_loading_icon {
                  width: 100%;
                  height: 100%;
                  display: block;
                }
              }
            }
            .qa_system {
              background-color: @baseGreen;
              color: #fff;
              word-break: break-all;
              text-align: right;
              border-radius: 10px;
              padding: 10px 15px;
              font-size: 16px;
              display: inline-block;
              max-width: 600px;
              line-height: 1.5;
              position: relative;
            }
          }
          &.system {
            .qa_head {
              height: 50px;
              width: 50px;
              float: right;
              position: relative;
              .qa_head_border {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                z-index: 0;
              }
              .qa_head_img {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                position: absolute;
                top: 4px;
                left: 4px;
                z-index: 1;
              }
              .qa_head_icon {
                width: 26px;
                height: 13px;
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -13px;
                z-index: 2;
              }
            }
            .qa_detail {
              float: right;
              text-align: right;
              margin-right: 10px;
              margin-left: auto;
              word-break: break-all;
            }
          }
          &.teacher {
            .qa_head {
              height: 50px;
              width: 50px;
              float: right;
              position: relative;
              .qa_head_border {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                z-index: 0;
              }
              .qa_head_img {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                position: absolute;
                top: 4px;
                left: 4px;
                z-index: 1;
              }
              .qa_head_icon {
                width: 26px;
                height: 13px;
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -13px;
                z-index: 2;
              }
            }
            .qa_detail {
              float: right;
              text-align: right;
              margin-right: 10px;
              margin-left: auto;
              word-break: break-all;
              .qa_text {
                background-color: @baseGreen;
                color: #fff;
                word-break: break-all;
                .triangle {
                  left: auto;
                  right: -8px;
                  transform:rotate(90deg);
                  border-bottom: 6px solid @baseGreen;
                }
              }
              .qa_image {
                .triangle {
                  position: absolute;
                  left: auto;
                  right: -10px;
                  top: 12px;
                  border-left: 5px solid transparent;
                  border-right: 5px solid transparent;
                  border-bottom: 6px solid @baseGreen;
                  transform:rotate(90deg);
                }
              }
              .qa_voice {
                .triangle {
                  position: absolute;
                  left: auto;
                  right: -8px;
                  top: 12px;
                  border-left: 5px solid transparent;
                  border-right: 5px solid transparent;
                  border-bottom: 6px solid @baseGreen;
                  transform:rotate(90deg);
                }
              }
            }
            &.red {
              .qa_detail {
                .qa_text {
                  background-color: @baseRed;
                  .triangle {
                    border-bottom: 6px solid @baseRed;
                  }
                }
                .qa_image {
                  border-color: @baseRed;
                  .triangle {
                    border-bottom: 6px solid @baseRed;
                  }
                }
                .qa_voice {
                  background-color: @baseRed;
                  .triangle {
                    border-bottom: 6px solid @baseRed;
                  }
                }
                .qa_answer {
                  .answer_top_text {
                    background-color: @baseRed;
                  }
                  .answer_top_voice {
                    background-color: @baseRed;
                  }
                }
              }
            }
          }
          &.gift {
            text-align: center;
            .qa_head {
              display: none;
            }
            .qa_detail {
              display: none;
            }
          }
        }
      }
      .qa_new_msg_con {
        position: absolute;
        bottom: 50px;
        z-index: 2;
        cursor: pointer;
        display: inline-block;
        border-radius: 20px;
        height: 40px;
        line-height: 40px;
        padding: 0 50px 0 20px;
        border: 1px solid @baseGreen;
        left: 50%;
        transform: translate(-50%, -50%);
        &.red {
          border-color: @baseRed;
        }
        .qa_new_msg_drop {
          position: absolute;
          width: 20px;
          height: 10px;
          top: 15px;
          right: 20px;
        }
      }
    }
    .qa_footer {
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0 20px;
      .input_con {
        height: 80px;
        .input {
          width: 100%;
          border: 1px solid #e9eaec;
          height: 80px;
          font-size: 14px;
          padding: 0 10px;
          border-radius: 7px;
          background-color: #fff;
          box-shadow: none;
          display: block;
          margin-top: 15px;
          color: #333;
          resize: none;
          box-sizing: border-box;
          &::-webkit-input-placeholder{
            color: #7b818e;
          }
          &::-moz-placeholder{  //不知道为何火狐的placeholder的颜色是粉红色，怎么改都不行，希望有大牛路过帮忙指点
            color: #7b818e;
          }
          &:-moz-placeholder{  //不知道为何火狐的placeholder的颜色是粉红色，怎么改都不行，希望有大牛路过帮忙指点
            color: #7b818e;
          }
          &:-ms-input-placeholder{  //由于我的IE刚好是IE9，支持不了placeholder，所以也测试不了(⊙﹏⊙)，有IE10以上的娃可以帮我试试
            color: #7b818e;
          }
        }
      }
      .send_btn_con {
        margin: 20px 0;
        overflow: hidden;
        position: relative;
      }
      .out_dm_other_list_icon_out {
        float: left;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        background-color: #44b549;
        line-height: 30px;
        text-align: center;
        position: relative;
        .out_dm_other_list_icon {
          width: 15px;
          height: auto;
          cursor: pointer;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .out_dm_other_list_text {
          height: 30px;
          line-height: 30px;
          position: absolute;
          left: 35px;
          top: 0;
          width: 100px;
          text-align: left;
          font-size: 14px;
        }
      }
      .toggle_question_icon {
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        position: absolute;
        right: 85px;
        font-size: 12px;
        padding-left: 18px;
        color: #bfbfbf;
        .question_icon {
          width: 14px;
          height: 14px;
          position: absolute;
          top: 9px;
          left: 0;
        }
        &.active {
          color: @baseGreen;
        }
      }
      .send_btn {
        width: 79px;
        height: 32px;
        border-radius: 4px;
        background-color: @baseGreen;
        color: #fff;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        float: right;
      }
      &.red {
        .send_btn {
          background-color: @baseRed;
        }
      }
    }
    .link_mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      background-color: rgba(0,0,0,.7);
      .link_mask_inner {
        background-color: #edeef0;
        border-radius: 6px;
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        max-height: 50%;
        width: 400px;
        transform: translate(-50%, -50%);
        .link_search {
          height: 60px;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          background-color: #fff;
          .close_icon {
            width: 30px;
            height: 30px;
            left: 20px;
            top: 15px;
            position: absolute;
            cursor: pointer;
          }
          .input_con {
            padding-left: 60px;
            padding-right: 20px;
            height: 60px;
            .input {
              padding: 0 15px;
              width: 100%;
              height: 30px;
              border-radius: 15px;
              border: 1px solid #ccc;
              margin-top: 15px;
              box-shadow: none;
            }
          }
        }
        .link_list {
          margin-top: 70px;
          width: 100%;
          background-color: #fff;
          overflow-x: hidden;
          overflow-y: auto;
          .link_list_inner {
            width: 418px;
            max-height: 200px;
            overflow-y: auto;
            .link_item {
              cursor: pointer;
              height: 50px;
              line-height: 50px;
              position: relative;
              .link_item_inner{
                margin: 0 20px;
                box-sizing: border-box;
                border-top: 1px solid #ccc;
                .link_item_head {
                  position: absolute;
                  width: 30px;
                  height: 30px;
                  border-radius: 50%;
                  top: 10px;
                  left: 20px;
                }
                .link_item_name{
                  padding-left: 40px;
                  color: #333;
                  font-size: 14px;
                }
                &.no_border{
                  border:none;
                }
              }
            }
            .no_list {
              height: 120px;
              text-align: center;
              font-size: 15px;
              color: #666;
              line-height: 120px;
              width: 400px;
            }
          }

        }
        .link_loading {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 2;
          background-color: rgba(0,0,0,.5);
          .link_loading_icon {
            width: 20px;
            height: 20px;
            transform: translate(-50%, -50%);
            position: absolute;
            top: 50%;
            left: 50%;
          }
        }
      }
    }
  }
  .big_image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background-color: @baseBlack;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
  }
}
